<template>
  <async-comp></async-comp>
</template>

<script>
   // import { defineAsyncComponent } from 'vue'

  import {
    defineAsyncComponent,
    ref,
    reactive,
    watch,
    shallowReactive,
    shallowReadonly,
    shallowRef,
    readonly,
    toRaw,
    isRef,
    isProxy,
    isReactive,
    isReadonly,
    toRef,
    toRefs
  } from 'vue'


</script>

<script setup>
  // 通过属性传入需要运行的代码和模板
  const props = defineProps({
    code: {
      type: Object,
      default: () => {
        return {
          js: '',
          template: '',
          style: ''
        }
      }
    }
  })

  const code = props.code

  // 使用 defineAsyncComponent 让代码运行起来
  const AsyncComp = defineAsyncComponent(
    () => new Promise((resolve, reject) => {
        resolve({
          template: code.template, // 设置模板
          style: [code.style], // 大概是什么设置，但是好像没啥效果
          setup: (props, ctx) => {
            const tmpJs = code.js // 获取js代码
            let fun = null // 转换后的函数
            try {
              if (tmpJs)
                fun = eval('(' + tmpJs + ')') // 用 eval 把 字符串 变成 函数
            } catch (error) {
              console.log('转换出现异常：', error)
            }

            const re = typeof fun === 'function' ? fun : () => {}

            return {
              ...re(props, ctx) // 运行函数，解构返回对象
            }
          }
        })
      })
  )

</script>